import { List, InputItem, WhiteSpace, DatePicker, Button, Flex, Picker, TextareaItem  } from 'antd-mobile';
import { createForm } from 'rc-form';
import moment from 'moment';
import 'moment/locale/zh-cn';
import enUs from 'antd-mobile/lib/date-picker/locale/en_US';
import { Setting } from './Setting';
import RegionPicker from './RegionPicker'

class LoginT extends React.Component {

  constructor(props) {
      super(props);

      this.state = {
          zjhm: props.record.zjhm ? props.record.zjhm : '',
          zjlx: props.record.zjlx ? [props.record.zjlx] : '',
      };
  }

  mapCardNumber() {
      if (this.state.zjhm) {
          let result = [], zjhm = this.state.zjhm.toUpperCase();
          for (let i = 0; i < zjhm.length; i++) {
            if (i == 6 || i == 14) result.push(" ");

            result.push(zjhm[i]);
          }

          return result;
      } else {
          return [];
      }
  }

  updateCardNumber(v) {
      this.props.record.zjhm = v;
      this.setState({zjhm: v});
  }

  render() {
    const name = this.props.nodeName;
    const { record } = this.props;

    const cardType = [{ value: '1', label: '居民身份证' }, { value: '3', label: '港澳台身份证' }];

    return (
      <div className={name}>
      	<h2 className="step-title">{this.props.title}</h2>

        <List>
            <Picker
                data={cardType}
                cols={1}
                onChange={v => {
                    this.setState({ zjlx: v });
                }}
                value={this.state.zjlx}
                className="forss"
            >
                <List.Item arrow="horizontal">证件类型</List.Item>
            </Picker>
            <input type="hidden" value={this.state.zjlx} name="zjlx"></input>
        </List>

        <List>
          <InputItem
            placeholder=""
            name="zjhm"
            onChange={ v => this.updateCardNumber(v) }
            value={this.state.zjhm}
            maxLength={ 18 }
            defaultValue={record.zjhm}
          >证件号码</InputItem>
        </List>
        <WhiteSpace />

        <div className="card-bigger">
            {this.state.zjhm && this.mapCardNumber().map(ch => <div>{ch}</div>)}
        </div>

      </div>
    );
  }

}

const Step4 = createForm()(LoginT);

export default Step4
